<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>高压氧舱消毒记录列表</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
        .recording-header {
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
            padding: 5px 0;
        }
        .recording-header>div {
            width: 33%;
            text-align: center;
            font-size: 16px;
        }
        .middle-wrapper>.middle-wrapper-body {
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
            padding: 2px 0;
        }

        .middle-wrapper>.middle-wrapper-body>div {
            width: 20%;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            text-align: center;
        }

        .middle-wrapper>.middle-wrapper-body>div:nth-child(1) {
            text-align: right;
            padding-right: 30px;
            box-sizing: border-box;
        }

        .recording-wrapper {
            width: 85%;
            border-radius: 10px;
            background-color: #fff;
            -moz-box-shadow: 1px 4px 20px #C2C2C2;
            -webkit-box-shadow: 1px 4px 20px #C2C2C2;
            box-shadow: 1px 4px 20px #C2C2C2;
            padding: 10px 0;
            margin: 20px auto;
        }

        #app {
            padding-top: 10px;
        }
    </style>
</head>

<body>
    <main id="app">
        <section class="recording-container">
            <div class="recording-wrapper" v-for="(item,index) in DisinfectionRecord">
                <div class="recording-header">
                    <div>
                        <span>日期</span>
                    </div>
                    <div>
                        <span>时间</span>
                    </div>
                    <div>
                        <span>签字</span>
                    </div>
                </div>
                <div class="recording-header">
                    <div>
                        <span>{{item.F_YcdrTime|dateFormat('YYYY-MM-DD')}}</span>
                    </div>
                    <div>
                        <span>{{item.F_YcdrDate}}</span>
                    </div>
                    <div>
                        <span>{{item.userNames}}</span>
                    </div>
                </div>
                <div class="middle-wrapper">
                    <div class="middle-wrapper-body">
                        <div>
                            <span>正舱</span>
                        </div>
                        <div>
                            <span>通风</span>
                            <span>{{item.F_JustCaAeration === 1 ? '✔':'✖'}}</span>
                        </div>
                        <div>
                            <span>地面</span>
                            <span>{{item.F_JustCaGround === 1 ? '✔':'✖'}}</span>
                        </div>
                        <div>
                            <span>舱壁</span>
                            <span>{{item.F_JustCaBulkhead === 1 ? '✔':'✖'}}</span>
                        </div>
                        <div>
                            <span>台面</span>
                            <span>{{item.F_JustCaMesa === 1 ? '✔':'✖'}}</span>
                        </div>
                    </div>
                </div>
                <div class="middle-wrapper">
                    <div class="middle-wrapper-body">
                        <div>
                            <span>副舱</span>
                        </div>
                        <div>
                            <span>通风</span>
                            <span>{{item.F_ViceCaAeration === 1 ? '✔':'✖'}}</span>
                        </div>
                        <div>
                            <span>地面</span>
                            <span>{{item.F_ViceCaGround === 1 ? '✔':'✖'}}</span>
                        </div>
                        <div>
                            <span>舱壁</span>
                            <span>{{item.F_ViceCaBulkhead === 1 ? '✔':'✖'}}</span>
                        </div>
                        <div>
                            <span>台面</span>
                            <span>{{item.F_ViceCaMesa === 1 ? '✔':'✖'}}</span>
                        </div>
                    </div>
                </div>

                <div class="middle-wrapper">
                    <div class="middle-wrapper-body">
                        <div>
                            <span>过渡舱</span>
                        </div>
                        <div>
                            <span>通风</span>
                            <span>{{item.F_ExceCaAeration === 1 ? '✔':'✖'}}</span>
                        </div>
                        <div>
                            <span>地面</span>
                            <span>{{item.F_ExceCaGround === 1 ? '✔':'✖'}}</span>
                        </div>
                        <div>
                            <span>舱壁</span>
                            <span>{{item.F_ExceCaBulkhead === 1 ? '✔':'✖'}}</span>
                        </div>
                        <div>
                            <span>台面</span>
                            <span>{{item.F_ExceCaMesa === 1 ? '✔':'✖'}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>

</html>

<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/vue.js" charset="utf-8"></script>
<script src="../js/ToConfigure.js" charset="utf-8"></script>
<script src="../script/aui-toast.js" charset="utf-8"></script>
<script type="text/javascript">
    //调用vue中的过滤器，固定第一个参数为传入的要处理的数据data
    //Vue.filter('过滤器的名称',function(data){});
    //进行时间的格式化
    Vue.filter('dateFormat', function(dateStr, time) {
        //得到特定的时间
        var date = new Date(dateStr);
        var year = date.getFullYear();
        //ES6语法填充：var month = (date.getMonth()+1).toString().padStart(2, '0');
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        var hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
        var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
        var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();

        //return `${year}-${month}-${day}`;

        if (time && time.toLowerCase() === 'yyyy-mm-dd') {
            return `${year}-${month}-${day}`;
        } else if (time && time.toLowerCase() === 'hh:mm:ss') {
            return `${hh}:${mm}:${ss}`;
        } else {
            return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
        }
    });
    apiready = function() {
        var vm = new Vue({
            el: '#app',
            data: {
                searchInfo: '',
                DisinfectionRecord: [], //消毒记录信息
                Url_IP: ""
            },
            created() {
                //获取所属医院IP地址
                this.Url_IP = ToConfigure_IP("Gorgeous");

                api.ajax({
                    url: this.Url_IP + 'EquipmentInspect/HO_YcDisinfectionRecord/Query_HO_YcDisinfectionRecord',
                    method: 'post',
                    data: {
                        values: {
                            parms: ""
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        vm.DisinfectionRecord = ret;
                    } else {
                        var toast = new auiToast();
                        toast.fail({
                            title: "暂无信息",
                            duration: 2000
                        });
                    }
                });
            }

        })
    }
</script>
